<!-- 隐藏搜索按钮和刷新图标组件 -->
<template>
  <div class="top-right-btn" :style="style">
    <el-row>
      <!-- 使用 v-if 和 v-else 来切换显示的图标 -->
      <el-tooltip class="item" effect="dark" :content="showSearch ? '隐藏搜索框' : '搜索数据'" placement="top">
        <svg-icon v-if="showSearch" icon-file-name="hideEye" @click="toggleSearchEvent"></svg-icon>
        <svg-icon v-else icon-file-name="search" @click="toggleSearchEvent"></svg-icon>
      </el-tooltip>
      <el-tooltip class="item" effect="dark" content="刷新" placement="top">
        <svg-icon icon-file-name="refresh" @click="refreshEvent"></svg-icon>
      </el-tooltip>
    </el-row>
  </div>
</template>

<script>
export default {
  data() {
    return {
      style: {
        position: 'absolute',
        right: '20px',
        top: '20px'
      },
      showSearch: true,
    };
  },
  methods: {
    toggleSearchEvent() {
      this.$emit('toggle-search');//调用父组件的方法
      this.showSearch = !this.showSearch; // 直接在这里切换 showSearch 的值
      if (this.autoScroll) {
        this.scrollTo(0, 800);
      }
    },
    refreshEvent() {
      this.$emit('refresh');//调用父组件刷新函数
      if (this.autoScroll) {
        this.scrollTo(0, 800);
      }
    }
  }
};
</script>

<style scoped>
.top-right-btn {
  margin-left: auto;
}
.item {
  margin-left: 15px;
}
</style>
